<template>
	<view class="content">
			<uni-nav-bar  shadow color="#000" background-color="#ffffff" status-bar left-icon="left"  
					right-icon="more-filled" title="小树洞" @clickLeft="back" @clickRight="back"/>
		<view class="container">
			
			<!-- f1关闭按钮 -->
			<view class="shutdown" @click="handleClose()">
				<image class="icon" src="../../static/img/icon_off.b82fddce.svg" mode="aspectFit"></image>
			</view>
			<!-- f2操作按钮 -->
			<view class="button xiaoxi" @click="handleLeftButtonClick()">
				<image class="icon1" src="../../static/img/treehole_infrom.0e1a017a.png" mode="aspectFit"></image>

			</view>

			<view class="button xinxiang" @click="handleRightButtonClick()">
				<image class="icon1" src="../../static/img/treehole_mine.d8b59014.png" mode="aspectFit"></image>

			</view>

			<view class="button1 " @click="ButtonClick()">
				<image class="icon2" src="../../static/img/咨询.png" mode="aspectFit"></image>

			</view>
			<!-- f3写信拆信 -->
			<view class="container1">
				<view class="button-row">
					<view class="button2 write" @click="handleWriteClick()">
						<image src="../../static/img/main_btn.b2b49fd8.png" mode="aspectFit">
						</image>
						<text class="wenzi1">写信</text>
					</view>
					<view class="button2 open" @click="handleOpenClick()">
						<image src="../../static/img/main_btn.b2b49fd8.png" mode="aspectFit">
						</image>
						<text class="wenzi1">拆信</text>
					</view>
				</view>
			</view>
		</view>
		<!-- f4打开app -->
		<view class="container2">
			<view class="buttonOpenApp" @click="handleOpenAppCilck()">
				<text class="wenzi2">打开APP，向树洞说说你的心事 </text>
			</view>
		</view>
		<!-- f5弹窗 -->
		<view v-if="showPopup" class="modal-overlay">

			<view class="modal-content modal-main">
				<view class="modal-close" @tap="closePopup">×</view>
				<view class="tanchuanglogo"></view>
				<view class="modal-title fw-medium">投递成功</view>
				<view class="modal-text">感谢你的信任，真诚的声音会被倾听和回应。祝你今天过得开心。</view>
				<view class="modal-button-container">
					<view class="modal-button fw-medium" @tap="closePopup">好的</view>
				</view>
			</view>

		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				showPopup: false // 控制弹窗显示的变量
			}
		},
		globalData: {
			newLetterSubmitted: false
		},
		onShow() {
			// 检查是否有新投递的信件
			if (getApp().globalData.newLetterSubmitted) {
				this.showPopup = true
				// 重置全局变量
				getApp().globalData.newLetterSubmitted = false
			}
		},
		methods: {
			handleClose() {
				console.log('关闭被点击')
				uni.navigateTo({
					url:'/pages/login/login'
				})
			},
			handleLeftButtonClick() {
				console.log('消息被点击')
				uni.navigateTo({
					url: '/pages/massage/massage'
				})
			},
			handleRightButtonClick() {
				console.log('信箱被点击')
				uni.navigateTo({
					url: '/pages/mailbox/mailbox'
				})
			},
			ButtonClick() {
				console.log('咨询被点击')
				window.open('#小程序://看见心理平台/EpZsaXRFMHBJFyh')
			},
			handleWriteClick() {
				console.log('写信被点击')
				uni.navigateTo({
					url: '/pages/write/write'
				})
			},
			handleOpenClick() {
				console.log('拆信被点击')
				uni.navigateTo({
					url: '/pages/open/open'
				})
			},
			handleOpenAppCilck() {
				console.log('打开下载app')
				window.open('https://sj.qq.com/appdetail/com.wwyy.wzhxl?ckey=CK1456487930531&from_wxz=1', '_blank');
			},
			closePopup() {
				this.showPopup = false
			},
		}
	}
</script>

<style lang="scss">
	
	
	
	.container {
		position: relative;
		height: 92vh;
		background-image: url();
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
		background-attachment: fixed;

		.container1 {
			height: calc(100% - 140rpx);
			display: flex;
			flex-direction: column;
			justify-content: flex-end;
			padding: 0 15px;

		}
	}

	.shutdown {
		position: absolute;
		width: .064rem;
		height: 100%;
		top: 20px;
		right: 50px;
		background-size: auto .048rem;
		background-repeat: no-repeat;
		background-position-x: 50%;
		background-position-y: center;
		cursor: pointer;
	}


	.icon {
		width: 30px;
		height: 30px;
		object-fit: cover;
	}

	.button {
		position: absolute;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 50px;
		height: 80px;
		top: 130rpx;
		border-radius: 5px;

	}

	.xiaoxi {
		left: 20px;


	}

	.xinxiang {
		right: 20px;

	}

	.icon1 {
		width: 97rpx;
		height: 105rpx;
		margin-bottom: 5px;
	}

	.button1 {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 90px;
		height: 80px;
		position: absolute;
		top: 370rpx;
		right: 1px;

	}

	.icon2 {
		width: 140rpx;
		height: 105rpx;
		margin-bottom: 5px;
	}

	.button-row {
		display: flex;
		justify-content: space-between;
		/* 确保按钮之间和与容器边缘的间距一致 */
		align-items: center;
		width: 100%;
	}

	.button2 {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		width: calc(50% - 20px);
		/* 减去两边的间距以避免重叠 */
		height: 70rpx;
		border-radius: 30rpx;
	}

	.wenzi1 {
		position: absolute;
		color: #fff2d5;
		font-weight: bold;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		z-index: 1;
		font-size: 18px;
	}

	.buttonOpenApp {
		margin: 20rpx auto;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 700rpx;
		height: 100rpx;
		border-radius: 60rpx;
		background-color: #ffca85;

	}

	.wenzi2 {
		color: #000000;
		font-weight: bold;
		font-size: 35rpx;
	}

	.modal-overlay {
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		z-index: 999;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.modal-content {
		background-color: #fffbea;
		border-radius: 10px;
		
		position: relative;
		overflow: visible;
		padding: 17px 17px;
		margin-left: 12.8%;
		/* 左边间隔 */
		margin-right: 12.8%;
	}

	.modal-main {

		flex-grow: 1;
		overflow-x: hidden;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch
	}

	.tanchuanglogo {
		width: 0;
		height: 0;
		padding: 56px;
		margin: 0 auto;
		background-size: 100% auto;
		background-repeat: no-repeat;
		background-position: bottom;
		background-image: url('../../static/img/logo_publish_success.7471650d.png');
	}

	.modal-close {
		position: absolute;
		justify-content: center;
		align-items: center;
		top: 1px;
		right: 10px;
		font-size: 30px;
		cursor: pointer;
		color: #c2bcb2;
	}

	.modal-title {

		margin: 17px 0 0;
		font-size: 18px;
		line-height: 1.33;
		text-align: center;
		color: #523d14;

	}

	.fw-medium {
		font-weight: 600;
	}

	.modal-text {
		margin: 15px 0 0;
		font-size: 17px;
		line-height: 1.5;
		text-align: center;
		color: #523d14;

	}

	.modal-button-container {
		display: flex;
		justify-content: center;
	}

	.modal-button {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 120px;
		height: 46px;
		margin: 25px auto 0;
		font-size: 17px;
		border-radius: 16px;
		color: #704300;
		background: linear-gradient(180deg, #ffefad, #f4ba45);
	}
</style>